<template>
  <container title="商品列表">
    <template v-slot:tips>
      <el-tabs v-model="tabBarName" @tab-click="tabBarClick" class="title-tab">
        <el-tab-pane v-for="(item, index) in tabBarList" :label="item.label" :name="item.name" :key="index">
        </el-tab-pane>
      </el-tabs>
    </template>
    <div class="main-card" v-loading="loading">
      <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
        <template v-slot:left>
          <el-input placeholder="商品名称" class="short" v-model="filter.keyword" clearable size="small"
                    style="margin-right:10px;width:200px;"></el-input>
          <el-button
              icon="el-icon-search" type="primary" size="small"
              @click="loadDataList(1)">查询
          </el-button>
          <el-button
              icon="el-icon-refresh" size="small"
              @click="initDataList()">重置
          </el-button>
          <el-button
              type="text"
              @click.stop="$refs.search.show(filter)">
            高级搜索
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </template>
        <template #right>
<!--          <el-link :underline="false" type="primary" style="margin-right: 20px" @click="showBatch">批量处理-->
<!--          </el-link>-->
          <el-button size="small" icon="el-icon-plus" circle
                     @click="$refs.type.show()"></el-button>
          <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
        </template>
      </tbc-pagination>
      <div class="data-container">
        <tbc-dynamic-table ref="table" :data="dataList"
                           :cols="[
          {type: 'selection', width: 60},
          {label: '商品', prop: 'goods', minWidth: 400},
          // {label: '规格总数', prop: 'sku_total', align: 'center', width: 140},
          {label: '销售价', prop: 'shop_price', align: 'center', width: 140},
          {label: '总库存', prop: 'stock_total', align: 'center',width: 140},
          {label: '排序', prop: 'sort_weight', align: 'center', sortable: 'custom', type: 'input', width: 140},
          {label: '销售状态', prop: 'sale_status', align: 'center', width: 140},
          {label: '操作', width: 100, type: 'action', fixed: 'right', click: onButtonClick, button: [
              {label: '编辑', type: 'text', code: 'edit'},
      ], more: [
            {label: '删除', type: 'text', code: 'delete'},
            {label: '版本', type: 'text', code: 'version'},
    ]}]">
          <template v-slot:goods="scope">
            <div style="float:left;width:80px;height:80px;">
              <el-image
                  :src="scope.row.goods_image"
                  :preview-src-list="[scope.row.goods_image]">
              </el-image>
            </div>
            <div style="padding:0 50px 0 100px;min-width: 400px;">
              <p>{{ scope.row.goods_id }}</p>
              <p class="tbc-hover">
                <span class="tbc-hover-text">{{ scope.row.goods_name }}</span>
                <i class="el-icon el-icon-edit tbc-hover-show" style="padding-left: 10px"
                   @click="$refs.quick.show(scope.row)"></i>
              </p>
            </div>
          </template>
          <template v-slot:base="scope">
            <p>{{ scope.row.goods_id }}</p>
            <p style="white-space: pre-line">
              <el-link :underline="false">{{ scope.row.goods_name }}</el-link>
            </p>

            <p style="font-size: 14px;color: #666" v-if="scope.row.brand_name">
              <span>品牌：</span>
              <span style="color:#31b4e1">{{ scope.row.brand_name }}</span>
            </p>
          </template>

          <template v-slot:sale_status="scope">

            <p class="tbc-hover" @click="changeSaleStatus(scope.row)">
              <el-tag size="mini" effect="dark" type="success" v-if="scope.row.sale_status === 1">销售
              </el-tag>
              <el-tag size="mini" effect="dark" type="primary" v-if="scope.row.sale_status === 2">仓库
              </el-tag>
            </p>
          </template>
        </tbc-dynamic-table>
      </div>
      <tbc-pagination :total="total" :config="{page, size}" @change="loadDataList"/>
    </div>
  </container>
  <type-selector ref="type"/>
  <advanced-search ref="search" @search="search"/>
  <quick-edit ref="quick" @success="loadDataList"/>
</template>
<script lang="ts">
import {defineComponent, toRefs, onMounted, defineAsyncComponent, ref, onActivated} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import useGoods from './api/goods'

export default defineComponent({

  name: 'goods-list',

  components: {
    AdvancedSearch: defineAsyncComponent(() =>
        import('./components/GoodsAdvancedSearch.vue')),
    TypeSelector: defineAsyncComponent(() =>
        import('./components/GoodsFormTypeSelector.vue')),
    QuickEdit: defineAsyncComponent(() =>
        import('./components/GoodsQuickEdit.vue')),
  },

  setup() {
    const goods = useGoods()
    const route = useRoute()
    const router = useRouter()
    const tabBarName = ref('all')
    const tabBarList = [
      {label: '全部', name: 'all', status: 0},
      {label: '出售中', name: 'on', status: 1},
      {label: '已下架', name: 'off', status: 2}
    ]


    const tabBarClick = (tab: Record<string, number>) => {
      goods.filter.value.sale_status = Number(tabBarList[tab.index].status)
      goods.loadDataList(1)
    }

    const onButtonClick = (data: { [k: string]: number | string, goods_id: string }, action: string) => {
      if (action === 'edit') {
        return router.push({name: 'goods-edit', query: {id: data.goods_id}})
      }
      // if (action === 'version') {
      //   return this.$refs.version.show(data.goods_id)
      // }
      if (action === 'delete') return goods.deleteDataItem(data)
    }

    const search = (filter: { [k: string]: string | number }) => {
      // for (let i in filter) goods.filter.value[i] = filter[i]
      goods.filter.value = {...goods.filter.value, ...filter}
      goods.loadDataList(1)
      const index = tabBarList.findIndex(item => item.status === goods.filter.value.sale_status)
      tabBarName.value = tabBarList[index].name
    }


    onMounted(() => {
      console.log('============')
      goods.loadDataList(1)
    })


    let flag = ''
    onActivated(() => {
      if (route.params.t && flag !== route.params.t) goods.loadDataList()
      flag = route.params.t as string || ''
      console.log('onActivated', route.params.t, flag)
    })


    return {
      ...goods,
      onButtonClick,
      tabBarName,
      tabBarList,
      tabBarClick, search
    }
  },


  // methods111: {
  //   sortChange(data) {
  //     this.order = [data.prop, data.order === 'ascending' ? 'asc' : 'desc'].join(',')
  //     this.loadDataList(1)
  //   },
  //
  //
  //   search(filter) {
  //     for (let i in filter) this.filter[i] = filter[i]
  //     this.loadDataList()
  //     let index = this.tabBarList.findIndex(item =>
  //         item.status === this.filter.sale_status)
  //     this.tabBarName = this.tabBarList[index].name
  //   },
  //
  //
  //   async quickEdit(data) {
  //     const res = await this.http.post('/goods/quickEdit', data);
  //     if (res.data.code !== 0) this.$message.error(res.data.message)
  //     this.$message.success(res.data.message)
  //     return res
  //   },
  //
  //   showBatch() {
  //     this.selection = this.$refs.table.selection
  //     if (!this.selection.length) return this.$message.warning('请选择要设置的行')
  //     this.$refs.batch.show(this.selection)
  //   },
  //
  //   toGoodsForm(item) {
  //     this.$router.push({name: 'goods-add', query: {type: item.code}})
  //   },
  //
  //
  //   // 上下架
  //   async changeSaleStatus(data) {
  //     this.$confirm('确定操作？', '提示', {
  //       confirmButtonText: '确定',
  //       cancelButtonText: '取消',
  //       type: 'warning'
  //     }).then(async () => {
  //       const res = await this.http.post('/goods/changeSaleStatus', {
  //         goods_id: data.goods_id,
  //         status: data.sale_status === 1 ? 2 : 1
  //       });
  //       if (res.data.code !== 0) return this.$message.error(res.data.message)
  //       data.sale_status = data.sale_status === 1 ? 2 : 1
  //     });
  //   },
  //
  // },
})
</script>
